<template>
  <q-layout view="hHh lpR fFf" class="bg-grey-1">
    <q-header class="bg-white text-grey-8">
      <q-toolbar class="GNL__toolbar">
        <q-space />

        <q-input
          class="GNL__toolbar-input"
          outlined
          dense
          v-model="search"
          debounce="500"
          color="bg-grey-7 shadow-1"
          placeholder="搜索"
        >
          <template v-slot:prepend>
            <q-icon v-if="search === ''" name="search" />
            <q-icon
              v-else
              name="clear"
              class="cursor-pointer"
              @click="search = ''"
            />
          </template>
        </q-input>

        <q-space />
      </q-toolbar>
    </q-header>

    <q-page-container>
      <q-list class="q-ma-sm q-mt-md">
        <q-item v-for="item in rows" :key="item.id" style="border-radius: 10px">
          <q-card class="my-card">
            <q-card-section>
              <div class="text-h6">{{ item.title }}</div>
            </q-card-section>
            <q-card-section>正确答案： {{ item.key }} </q-card-section>

            <q-card-section
              :class="
                item.key.split('').indexOf('A') != -1 ? 'bg-light-blue-3' : ''
              "
            >
              <span class="text-h6">A: </span> {{ item.optionA }}
            </q-card-section>
            <q-card-section
              :class="
                item.key.split('').indexOf('B') != -1 ? 'bg-light-blue-3' : ''
              "
            >
              <span class="text-h6">B: </span> {{ item.optionB }}
            </q-card-section>
            <q-card-section
              :class="
                item.key.split('').indexOf('C') != -1 ? 'bg-light-blue-3' : ''
              "
            >
              <span class="text-h6">C: </span> {{ item.optionC }}
            </q-card-section>
            <q-card-section
              :class="
                item.key.split('').indexOf('D') != -1 ? 'bg-light-blue-3' : ''
              "
            >
              <span class="text-h6">D: </span> {{ item.optionD }}
            </q-card-section>
          </q-card>
        </q-item>
      </q-list>
    </q-page-container>
  </q-layout>
</template>

<script setup lang="ts">
import { onMounted, watch } from 'vue';
import { ref } from 'vue';
import { api } from 'src/boot/axios';

const search = ref('');
watch(search, (newVal) => {
  search.value = newVal;
  f5();
});
const rows = ref<
  Array<{
    id: string;
    title: string;
    key: string;
    optionA: string;
    optionB: string;
    optionC: string;
    optionD: string;
  }>
>([]);

const f5 = () => {
  api.get('/search?query=' + search.value).then((res) => {
    rows.value = res.data.data;
  });
};
onMounted(() => {
  f5();
});
</script>

<style scoped>
.GNL__toolbar {
  height: 64px;
}

.GNL__toolbar-input {
  width: 55%;
}

.GNL__drawer-item {
  line-height: 24px;
  border-radius: 0 24px 24px 0;
  margin-right: 12px;
}

.GNL__drawer-item .q-item__section--avatar .q-icon {
  color: #5f6368;
}

.GNL__drawer-item .q-item__label {
  color: #3c4043;
  letter-spacing: 0.01785714em;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.GNL__drawer-footer-link {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.75rem;
}

.GNL__drawer-footer-link:hover {
  color: #000;
}
</style>
